<template>
	<view class="content page">
		<view class="task" v-for="(item,index) in infoData" :key="index">
			<view class="task_con">
				<text>{{item.areaName}}</text><text>{{item.remark}}</text>
			</view>
			<view class="task_pass">
				<view :class="item.qualified==0?'pass_select':''" @click="changeResponsibility(0,index)">
					合格
				</view>
				<view :class="item.qualified==1?'pass_select':''" @click="changeResponsibility(1,index)">
					不合格
				</view>
			</view>
		</view>
		
		<view class="rwjc_con">
			<view class="">
				存在主要问题
			</view>
			<textarea auto-height v-model="addfrom.problem" maxlength="200"  placeholder="请输入最多200个字符…"></textarea>
		</view>
		<view class="rwjc_con">
			<view class="">
				问题纠正
			</view>
			<textarea auto-height v-model="addfrom.problemCorrection" maxlength="200"  placeholder="请输入最多200个字符…"></textarea>
		</view>
		<view class="rwjc_con">
			<view class="">
				责任人
			</view>
			<textarea auto-height v-model="addfrom.personLiable" maxlength="200"  placeholder="请输入最多200个字符…"></textarea>
		</view>
		<view class="rwjc_con">
			<view class="">
				备注
			</view>
			<textarea auto-height v-model="addfrom.remark" maxlength="200"  placeholder="请输入最多200个字符…"></textarea>
		</view>	
		<view class="rwjc_sub" @click="submit()">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoData:[],
				addfrom:{}
			};
		},
		onLoad(option) {
			this.getTitle(option.id)
			this.getCleanAreaC(option.id)
			this.cleanType=option.id
		},
		methods: {
				getTitle(title) {
					uni.setNavigationBarTitle({
						title:title==0?'绿化每日任务':title==1?'绿化每周任务':'绿化每月任务'
					});
				},
				getCleanAreaC(id){
					//联网加载数据
					
					this.apis.greencleanApi.clCleanAreaList({
							cleanType:id
						}).then(res => {
						this.infoData=res.rows
					}).catch(()=>{
						//联网失败的回调,隐藏下拉刷新的状态
					})
				},
				changeResponsibility(num,index) {
					this.infoData[index].qualified = num
					this.qualified = num
				},
				
				submit() {
					this.addfrom.cleanAreaList = this.infoData
					this.addfrom.cleanType=this.cleanType
					//联网加载数据
					
					this.apis.greencleanApi.addclCleanRecord(this.addfrom).then(res => {
						uni.navigateTo({
							url: './successfully?id='+res.msg
						})
						this.addfrom = {}
					}).catch(() => {
						//联网失败的回调,隐藏下拉刷新的状态
					})
					// this.$refs.uForm.validate(valid => {
					// 	if (valid) {
					// 		console.log('验证通过',this.form);
					// 	} else {
					// 		console.log('验证失败');
					// 	}
					// });
				}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		padding-top: 20rpx;
	}
	.content {
		.task{
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
			padding: 40rpx 30rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			.task_con{
				height: 84rpx;
				overflow: hidden;
				font-size: 30rpx;
				font-weight: 500;
				text:nth-child(1){
					color: #333333;
				}
				text:nth-child(2){
					color: #999999;
					margin-left: 10rpx;
				}
			}
			.task_pass{
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
					view {
						padding: 0;
						font-size: 28rpx;
						color: #666666;
						width: 100%;
						height: 80rpx;
						border-radius: 4rpx;
						line-height: 80rpx;
						text-align: center;
						background: rgba($color: #DDDDDD, $alpha: 0.35);
					}
					view:nth-child(1){
						margin-right: 20rpx;
					}
					.pass_select {
						box-sizing: border-box;
						color: #44D94B;
						background: rgba(68, 217, 75, 0.1);
						border: 1rpx solid #44D94B !important;
					}
			}
		}
		
		.rwjc_con{
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
			padding: 40rpx 30rpx;
			margin-bottom: 20rpx;    
			align-items: flex-start;
			border-radius: 12rpx;
			view{
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}
			/deep/ .uni-textarea-wrapper {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}
			
			/deep/ .uni-textarea-placeholder {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}
			
			textarea {
				margin-top: 20rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				min-height: 200rpx;
			}
		}
	.rwjc_sub{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
				padding: 28rpx 0;
		background: #44D94B;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		@include flexCenter
	}
	}
</style>
